<script setup lang="ts">
const value = ref("");

const person = [
  {
    id: 1,
    name: "张三",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 2,
    name: "李四",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 3,
    name: "王五",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 4,
    name: "赵六",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 5,
    name: "钱七",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 6,
    name: "孙八",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 7,
    name: "周九",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 8,
    name: "吴十",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 9,
    name: "郑十一",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 10,
    name: "王十二",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 10,
    name: "王十二",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 10,
    name: "王十二",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 10,
    name: "王十二",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
  {
    id: 10,
    name: "王十二",
    img: "/1.jpg",
    content: "你好啊",
    time: "12:00",
  },
];
const router = useRouter();
const ids = ref(1);
const show = (item: any) => {
  ids.value = item.id;
  localStorage.setItem("json", JSON.stringify(item));
  router.push("/Talk");
};
</script>

<template>
  <div class="w-100% h-20px flex items-center justify-between">
    <div class="flex">
      <img class="w-14 h-14 rounded-full" src="/1.jpg" alt="" />
      <p class="leading-10 ml-2">七夜</p>
    </div>
    <div>
      <van-icon name="fire-o" size="32" class="mx-2" />
      <van-icon name="plus" size="32" class="mx-1" />
    </div>
  </div>
  <div class="mt-5">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
  </div>
  <div>
    <div
      v-for="item in person"
      :key="item.id"
      :class="
        item.id === ids
          ? 'w-100% h-20 flex items-center justify-between bg-slate-100'
          : 'w-100% h-20 flex items-center justify-between'
      "
      @click="show(item)"
    >
      <div>
        <div class="ml-2 flex items-center justify-between">
          <img class="w-14 h-14 rounded-full" :src="item.img" alt="" />
          <div class="ml-2">
            <p class="text-14px">{{ item.name }}</p>
            <p class="text-12px text-gray-400">{{ item.content }}</p>
          </div>
        </div>
      </div>
      <div class="text-14px">{{ item.time }}</div>
    </div>
  </div>

</template>

<style scoped>
</style>